<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<!--内容写在container里面-->
<div class="container">
    <!--标题部分-->
    <div>  <!--<div>标签定义 HTML文档中的一个分隔区块或者一个区域部分,每写一个新区域都要写个div-->
        <h2>系统公告客户端设计及实现(Bootstrap+jquery)</h2>
    </div>
    <!--内容部分-->
    <div>
        <div id="noticeListContainer"><!--内容列表区,id值区分哪个form-->
            <form id="queryForm" style="display: inline">
                <!--placeholder属性规定可描述输入字段预期值的简短的提示信息(比如:一个样本值或者预期格式的短描述)-->
                <!--onclick--点击时触发函数-->
                <input type="text" name="title" placeholder="请输入标题">
                <input type="button" class="btn btn-primary btn-sm" value="查询" onclick="doQueryNotices()">
            </form>
            <button onclick="doDisplay()" class="btn btn-primary btn-sm">添加</button>
            <table class="table">
                <thead>
                <!--<tr> 标签定义 HTML 表格中的一行-->
                <tr>
                    <!--<th>标签定义 HTML 表格中的表头单元格-->
                    <th>序号</th>
                    <th>标题</th>
                    <th>类型</th>
                    <th>状态</th>
                    <th>创建时间</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr><!--<td>标签定义 HTML 表格中的标准单元格-->
                    <td colspan="6">数据正在加载中......</td>
                </tr>
                </tbody>
            </table>
            <!--分页div-->
            <div class="pageination">
                <!--button标签-按钮-->
                <button class="pre">上一页</button>
                <button class="percent">1/1</button>
                <button class="next">下一页</button>
                <form style="display: inline">
                    <!--<form>标签用于创建供用户输入的 HTML 表单-->
                    <!--<input> 标签规定了用户可以在其中输入数据的输入字段
    <input>元素在 <form>元素中使用,用来声明允许用户输入数据的 input 控件-->
                    <input type="text" name="pageCurrent">
                    <input type="button" value="跳转" class="jump">
                </form>
            </div>
        </div>

        <!--设置编辑区不点添加按钮时隐藏
        可以在Bootstrap上复制表单模板-->
        <div id="noticeEditContainer" style="display: block">
            <form id="noticeEditForm">
                <!--设置一个隐藏的文本框，用于存放返回的id值-->
                <input typr="hidden" id="id" style="display: none">
                <div class="form-group">
                    <label for="typeId">类型:</label>
                    <!--<select>元素用来创建下拉列表。
           <select>元素中的 <option>标签定义了列表中的可用选项-->
                    <select class="form-control" id="typeId">
                        <option value="1">通知</option>
                        <option value="2">公告</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="titleId">标题:</label>
                    <input type="text" class="form-control" id="titleId" placeholder="请输入标题">
                </div>
                <div class="form-group">
                    <label for="contentId">内容:</label>
                    <textarea class="form-control" rows="3" id="contentId">
                    </textarea>
                </div>
                <div class="form-group">
                    <!--<label> 标签为 input 元素定义标注（标记）。-->
                    <label>状态:</label>
                    <label class="radio-inline">
                        <input type="radio" name="status" value="0" checked> 正常
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="status" value="1"> 关闭
                    </label>
                </div>

                <button type="button" class="btn btn-primary submit" onclick="doSaveOrUpdate()">Submit</button>
                <button type="button" class="btn btn-primary cancel">Cancel</button>
            </form>
        </div>
    </div>
    <br/>
</div>

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
        crossorigin="anonymous"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
        crossorigin="anonymous"></script>

<!--<script>标签用于定义客户端脚本，比如 JavaScript。-->
<script>
    //jquery中定义的页面加载函数(页面加载完成执行)
    $(function () {//页面加载完成执行
        doGetNotices();
        //分页事件注册及处理
//在类选择器为pagination的容器对象注册click点击触发事件，
        // 当点击容器内部的pre,next,jump类选择器对应的元素时执行doJumpToPage函数
        //上面的class属性要用 “.class” 获取属性
        $(".pageination").on("click", ".pre,.next,.jump", doJumpToPage);
    });

    //先基于id查找再修改提交
    function doFindById(id) {
        //1.基于id查找通告信息
        let url = `http://localhost/notice/${id}`;
        //同步请求：发送方发出数据后，等接收方发回响应以后才发下一个数据包的通讯方式。
        //异步请求：发送方发出数据后，不等接收方发回响应，接着发送下个数据包的通讯方式。
        $.ajax({
            url: url,
            success(result) {
                //将返回结果注入到表单中
                if (result.state == 1) {
                    //2.初始化表单数据
                    doInitEditForm(result);
                } else {
                    alert("没有对应的记录")
                }
            }
        })
    }

    //把查询结果赋值给表单数据
    function doInitEditForm(result) {
        $("#id").val(result.data.id);
        //设置返回结果的类型
        $(`#noticeEditForm select>option[value=${result.data.type}]`).prop("selected", true);
        $("#titleId").val(result.data.title);
        $("#contentId").val(result.data.content);
        //设置返回的状态
        $(`#noticeEditForm input[value=${result.data.status}]:radio`).prop("checked", true);
    }

    //添加或更新通告信息
    function doSaveOrUpdate() {
        //1.获取请求参数
        let params = {
            id: $("#id").val(),
            type: $("#typeId").val(),
            title: $("#titleId").val(),
            content: $("#contentId").val(),
            //获取被选中的选项的值
            status: $("#noticeEditForm input:radio:checked").val()
        }
        //2.定义请求url
        let url = "http://localhost/notice/";
        //3.发送异步请求
        $.ajax({
            method: params.id == 0 ? "post" : "put",
            url: url,
            data: JSON.stringify(params),//将js对象转换为json字符串
            contentType: "application/json",//向服务端传递的数据类型
            success(result) {
                if (result.state == 1) {
                    alert(result.message);
                    doGetNotices();
                    doRestForm();//重置表单数据
                } else {
                    alert(result.message);
                }
            }
        });
    }

    //修改完后表单设置为空
    function doRestForm() {
        $("#id").val("");
        $(`#noticeEditForm select>option[value=1]`).prop("selected", true);
        $("#titleId").val("");
        $("#contentId").val("");
        $(`#noticeEditForm input[value=0]:radio`).prop("checked", true);
    }

    //设置div容器的隐藏或显示
    function doDisplay() {
        //让编辑区显示
        $("#noticeEditContainer").css("display", "block");
        //让列表区隐藏
        $("#noticeListContainer").css("display", "none");
    }

    //点击查询按钮时基于条件查询通告信息
    function doQueryNotices() {
        //1.初始化当前页的页码
        localStorage.setItem("pageCurrent", 1);
        //2.基于条件进行查询
        doGetNotices();
    }

    //基于分页按钮点击事件，进行分页查询
    function doJumpToPage() {
        //1.获取被点击对象的class属性值
        //$(this)表示被点击的对象
        //prop(属性名[,属性值])-为jquery中用于操作属性值的一个函数
        let cls = $(this).prop("class");
        //2.基于被点击对象的class属性值修改当前的页码值
        //2.1获取当前页码值，总页数
        //parseInt() 函数可解析一个字符串，并返回一个整数。注意:只有字符串中的第一个数字会被返回,如"10"=10,"2.333"=2
        let pageCurrent = parseInt(localStorage.getItem("pageCurrent"));//当前页码值
        let pageCount = parseInt(localStorage.getItem("pageCount"));//总页数
        //2.2修改当前页码值
        if (cls == "pre" && pageCurrent > 1) {
            pageCurrent--;
        } else if (cls == "next" && pageCurrent < pageCount) {
            pageCurrent++;
        } else if (cls == "jump") {
            //获取form表单中元素为input,名字为pageCurrent的值
            //把值转换为int类型，以免有时出错
            let pageC = parseInt($("form input[name=pageCurrent]").val());
            if (pageC < 1 || pageC > pageCount) {
                //alert() 用于显示带有一条指定消息和一个确认按钮的警告框
                alert("页码值不合法");
                return;
            }
            pageCurrent = pageC;
            $("form input[name=pageCurrent]").val("");//初始化，设置为空串
        } else {
            return;
        }
        console.log("pageCurrent", pageCurrent)
        //将修改了的页码值，存储到浏览器localStorage对象中
        //***记住:存到localStorage里的任何东西，取出来的值都是String字符串,如存入a=1，则取出来是a="1",后面要转换
        localStorage.setItem("pageCurrent", pageCurrent);
        //3.基于新的页码值重新执行查询
        doGetNotices();
    }

    //条件查询公告通知信息
    function doGetNotices() {
        //定义请求参数
        //再取出修改过的页码值，并传入到ajax的data中执行查询
        let pageCurrent = localStorage.getItem("pageCurrent");
        if (pageCurrent == '' || pageCurrent == "NaN") pageCurrent = 1;
        //***注意:浏览器会把{"pageCurrent":3}改写成--?pageCurrent=3,再拼接在url后面去请求
        let params = {pageCurrent: pageCurrent};
        //获取文本框的输入标题的值,并把值动态添加到params
        let title = $("#queryForm input[name=title]").val();
        params.title = title;
        console.log(params);
        //基于jquery中的ajax函数向服务端发起异步请求
        //$代表jquery对象s
        $.ajax({
            url: "http://localhost/notice/",
            data: params,  //此时传入服务端的是--{pageCurrent:"3"},分页工具类会把"3"用parseInt转化成 3
            success(result) { //服务端没有抛出异常到客户端时执行此函数,result为服务端响应的结果
                //console.log(result);//打印在页面的console区
                doHandleQueryResponseResult(result);
            }
        })
    }

    //处理查询响应结果
    function doHandleQueryResponseResult(result) {
        if (result.state == 1) {
            doHandleQueryOK(result);
        } else {
            doHandleQueryError();
        }
    }

    function doHandleQueryError() {
        //1.更新tbody内容
        let tBody = $("table>tbody")
        let len = $("table>thead>tr>th").length;
        //colspan 属性定义单元格应该横跨的列数(6列)
        let tr = `<tr><td colspan="${len}">没有找到对应记录</td></tr>`
        tBody.html(tr);
        //2.刷新页码值
        $(".percent").html("1/1");
    }

    //处理正确的条件查询结果
    function doHandleQueryOK(result) {
        //设置tbody中的内容
        let records = result.data.list;
        doSetTableBodyRows(records);
        //设置分页信息(设置只有返回有数据时才有页码值)
        if (records.length > 0)
            doSetPagination(result);
    }

    function doSetPagination(result) {
        //初始化页面上的分页数据
        let pageCurrent = result.data.pageNum;//返回的响应标准的数据的当前页码值
        let pageCount = result.data.pages;//返回的响应标准的数据的总页码值
        //html() 方法用于设置或返回被选元素的内容
        $(".percent").html(pageCurrent + "/" + pageCount);
//将当前页码值存储到浏览器的localStorage对象中，便于其他方法后续应用
        //注意:存到localStorage对象里的是--
        localStorage.setItem("pageCurrent", pageCurrent);
        localStorage.setItem("pageCount", pageCount);
    }

    //设置tbody中的公告或通知信息
    function doSetTableBodyRows(records) {
//1.获取tbody对象，并清空原有内容
        let tBody = $("tbody");//获取tbody对象
        tBody.empty();//清空tbody内容
        //2.forEach迭代records中的内容，并用append方法追加到tbody中
        //当查询不到结果时，返回
        if (records.length == 0) {
            doHandleQueryError();
        }
        //forEach为js中原生函数，itam为数组中的一个元素，i为元素下标
        records.forEach((item, i) => tBody.append(doCreateRow(item, i)))
    }

    //创建tr对象并填写每一列的内容
    function doCreateRow(item, i) {
        //模板字符串
        //记得加上 fan引号--允许多行字符串(``内的多行字符串是个整体)，数组的序号默认是从0开始的，要加 1
        return `<tr> <td>${i + 1}</td>
            <td>${item.title}</td>
            <td>${item.type == '1' ? "通知" : "公告"}</td>
            <td>${item.status == '0' ? "正常" : "关闭"}</td>
            <td>${item.createdTime}</td>
            <td>
            <button class="btn btn-danger btn-xs" onclick="doDeleteById(${item.id})">delete</button>
            <button class="btn btn-warning btn-xs" onclick="doFindById(${item.id})">update</button>
            </td>
               </tr>`;
    }

    function doDeleteById(id) {
//1.定义请求参数
//2.定义请求url
        let url = `http://localhost/notice/${id}`
        //3.发送异步请求
        $.ajax({
            method: "delete",//delete请求格式
            url: url,
            success(result) {
                doHandleDeleteResponseResult(result);
            }
        });
    }

    function doHandleDeleteResponseResult(result) {
        if (result.state == 1) {
            doHandleDeleteOK(result.message)
            alert(result.message);
            doGetNotices();//删完再执行下查询
        } else {
            alert(result.message);
        }
    }

    function doHandleDeleteOK(msg) {
        //1.给出提示信息
        // alert(msg);
        //2.设置当前的页码值
        let rows = $("table>tbody>tr").length;//当前页有几条数据
        let pageCurrent = parseInt(localStorage.getItem("pageCurrent"));
        let pageCount = parseInt(localStorage.getItem("pageCount"));//返回的总页数
        if (pageCurrent > 1 && pageCurrent == pageCount && rows == 1) {
            pageCurrent--;
            localStorage.setItem("pageCurrent", pageCurrent);
        }
        //3.刷新
        doGetNotices();
    }
</script>

</body>
</html>